<template>
  <!-- 审核流程组件--目前使用：各个模块的目标职责管理下的年度重点工作，目标指标管理 -->
  <div ref="customTimeline" class="processMonitorIngTimeline-custom-timeline w-100 p-1">
    <div v-if="listData.length !== 0">
      <div v-for="(item, index) in listData" :key="index" class="custom-timeline-item">
        <div ref="leftWarp" class="leftWarp">
          <p class="big">
            {{ item.operateName }}
          </p>
          <p class="type">{{ item.operateType }}</p>
        </div>
        <div class="line-dot" />
        <div class="rightWarp">
          <el-collapse v-model="item.activeNames">
            <el-collapse-item :title="item.operateTime" name="1">
              <div v-for="subItem,subIndex in detailsData[item.operateName]" :key="subIndex">
                <span>{{ subItem.itemName }}：</span>{{ item[subItem.valueName] }}
              </div>
            </el-collapse-item>
          </el-collapse>
        </div>
      </div>
    </div>
    <el-empty v-else description="暂无数据" />
  </div>
</template>

<script>
export default {
  props: {
    defaultActiveName: {
      type: String,
      default: 'operateName'
    },
    defaultActiveNameArray: {
      type: Array,
      default: () => []
    },
    listDataProp: {
      type: Array,
      default: () => [
        {
          'activeNames': '1',
          'operateName': '下发年度重点工作',
          'operateType': '集团',
          'operateTime': '2023-03-10 13:45:00',
          'companyName': '重庆大江工业有限公司',
          'operatePerson': '李涵思',
          'auditDesc': '请修改内容。',
          'status': '退回'
        },
        {
          'activeNames': '1',
          'operateName': '提交企业认领工作内容',
          'operateType': '集团',
          'operateTime': '2023-03-10 13:45:00',
          'companyName': '重庆大江工业有限公司',
          'operatePerson': '李涵思',
          'auditDesc': '请修改内容。',
          'status': '退回'
        },
        {
          'activeNames': '1',
          'operateName': '审核企业认领工作内容',
          'operateType': '集团',
          'operateTime': '2023-03-10 13:45:00',
          'companyName': '重庆大江工业有限公司',
          'operatePerson': '李涵思',
          'auditDesc': '请修改内容。',
          'status': '退回'
        },
        {
          'activeNames': '1',
          'operateName': '提交工作完成情况',
          'operateType': '集团',
          'operateTime': '2023-03-10 13:45:00',
          'companyName': '重庆大江工业有限公司',
          'operatePerson': '李涵思',
          'auditDesc': '请修改内容。',
          'status': '退回'
        }
      ]
    },
    detailsDataProp: {
      type: Object,
      default: () => {
        return {
          '下发年度重点工作': [
            {
              itemName: '下发人',
              valueName: 'operatePerson'
            }
          ],
          '提交企业认领工作内容': [
            {
              itemName: '企业名称',
              valueName: 'companyName'
            },
            {
              itemName: '提交人',
              valueName: 'operatePerson'
            }
          ],
          '审核企业认领工作内容': [
            {
              itemName: '审核结果',
              valueName: 'status'
            },
            {
              itemName: '审核说明',
              valueName: 'auditDesc'
            },
            {
              itemName: '审核人',
              valueName: 'operatePerson'
            }
          ],
          '提交工作完成情况': [
            {
              itemName: '企业名称',
              valueName: 'companyName'
            },
            {
              itemName: '提交人',
              valueName: 'operatePerson'
            }
          ]
        }
      }
    }

  },
  data() {
    return {
      listData: [],
      detailsData: {}
    }
  },

  watch: {
    listDataProp: {
      handler(newVal) {
        this.formattingData()
      },
      deep: true
    }
  },
  created() {},
  mounted() {
    this.detailsData = this.detailsDataProp
    this.formattingData()
  },
  methods: {
    //     格式化数据
    formattingData() {
      this.listData = this.listDataProp
      this.handleActiveNames()
    },
    //     处理默认展开项
    handleActiveNames() {
      if (this.defaultActiveNameArray.length > 0) {
        this.defaultActiveNameArray.map(item => {
          this.listData = this.listData.map(x => {
            if (!x.activeNames && item === x[this.defaultActiveName]) {
              x.activeNames = '1'
              return x
            }
            return x
          })
        })
      } else {
        this.listData = this.listData.map(x => {
          x.activeNames = '1'
          return x
        })
      }
    }

  }
}
</script>

<style lang="scss">
.processMonitorIngTimeline-custom-timeline {
  .custom-timeline-item {
    display: flex;
    overflow: hidden;
    .leftWarp {
      min-width: 250px;
      height: auto;
      flex-shrink: 0;
      border-radius: 0;
      font-weight: bold;
      text-align: right;
      .big {
        padding: 10px;
        display: inline-block;
        width: 250px;
        background: #eff1f4;
        border-radius: 50px;
        //height: 40px;
        line-height: 40px;
        text-align: center;
      }
      .type{
        text-align: center;font-weight: normal;color: #999;margin-top: 3px;
      }
    }
    .line-dot {
      width: 50px;
      flex-shrink: 0;
      position: relative;
      &::before {
        content: '';
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        top: 0;
        bottom: 0;
        width: 2px;
        background: #0084ff;
        z-index: 8;
      }
      &::after {
        content: '';
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        width: 22px;
        height: 22px;
        top: 9px;
        border-radius: 50px;
        border: 3px solid #0084ff;
        background: #fff;
        z-index: 9;
      }
      .line-dot {
        &::before {
          background: #0084ff00;
        }
      }
    }
    .dot {
      width: 50px;
      flex-shrink: 0;
      position: relative;
      &::after {
        content: '';
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        width: 22px;
        height: 22px;
        top: 9px;
        border-radius: 50px;
        border: 3px solid #0084ff;
        background: #fff;
        z-index: 9;
      }
      .line-dot {
        &::before {
          background: #0084ff00;
        }
      }
    }
    .rightWarp {
      flex: 1;
      .el-collapse {
        border: none;
        margin-bottom: 20px;
        .el-collapse-item {
          .el-collapse-item__header,
          .el-collapse-item__wrap {
            border-bottom: none;
            border-top: none;
          }
          .el-collapse-item__header {
            height: 50px;
            line-height: 50px;
            transition: none;
            padding: 0 15px;
            color: #333;
            font-size: 0.32rem;
            background: #f3f4f7;
          }
        }
        .el-collapse-item {
          margin-bottom: 0 !important;
        }
        .el-collapse-item__content {
          font-size: 0.32rem;
          padding-bottom: 0;
          padding: 15px 15px;
          border: 1px solid #f3f4f7;
          border-radius: 5px;
        }
        .el-descriptions__body {
          color: #0a1c35;
        }
      }
    }
    &:first-child {
      .line-dot {
        &::before {
          top: 9px;
        }
      }
    }
    &:last-child {
      .el-collapse {
        margin-bottom: 0;
      }
      .line-dot {
        &::before {
          background: #f3f4f700 !important;
        }
      }
    }
  }
}
</style>
